<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网</title>
  <link rel="stylesheet" href="./base.css">
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>

  <!-- 顶部 -->
    <div class="header">
      <div class="text wrapper">
        <p>小米网</p>
        <p>MIUI</p>
        <p>米聊</p>
        <p>游戏</p>
        <p>多看阅读</p>
        <p>云服务</p>
        <p>小米网移动版</p>
        <p>问题反馈</p>
        <p>Select Region</p>
      </div>
    </div>

    <!-- 导航栏 -->
      <div class="nav-box wrapper">
        <img src="./images/logo.png" alt="">
        <img src="./images/new.gif" alt="">
        <div class="text">
          <p>小米手机</p>
          <p>红米</p>
          <p>平板</p>
          <p>电视</p>
          <p>盒子影音</p>
          <p>路由器</p>
          <p>智能硬件</p>
          <p>服务</p>
          <p>社区</p>
        </div>
      </div>

      <!-- 大图片 -->
        <div class="banner wrapper">
          <img src="./images/banner.png" alt=""></img>
          <!-- 侧边栏 -->
            <!-- 侧导航 ul -->
          <div class="subnav">
            <ul>
              <li>
                <div><a href="#" class="classify">手机</a><a href="#">平板</a><a href="#">电话卡</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">电视</a><a href="#">盒子</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">路由器</a><a href="#">智能硬件</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">移动电源</a><a href="#">插线板</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">耳机</a><a href="#">音箱</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">电池</a><a href="#">存储卡</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">保护套</a><a href="#">后盖</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">贴膜</a><a href="#">其他配件</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">米兔</a><a href="#">服装</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              <li>
                <div><a href="#" class="classify">箱包</a><a href="#">其他周边</a></div>

                <span class="iconfont icon-arrow-right-bold"></span>

              </li>

              
            </ul>

          </div>

        </div>


        <!-- 导航图 -->
          <div class="nav-img-box wrapper">
            <div>
              我就是一个空色块<br>
              一言不合就这么任性
            </div>
            <img src="./images/big/pro1.jpg" alt="">
            <img src="./images/big/pro2.jpg" alt="">
            <img src="./images/big/pro3.jpg" alt="">
          </div>

          <!-- 智能硬件 -->
            <div class="hardware wrapper">
              <div class="title">
                <p>智能硬件</p>
                <p>查看全部</p>
              </div>

              <!-- 商品信息 -->
                <div class="goods">
                  <!-- 左侧大图片 -->
                    <img src="./images/girl.jpg" alt="">
                  <!-- 右侧商品信息 -->
                    <div class="goods-info">
                      <!-- 单一商品信息 -->
                      <div class="product" > 
                        <p>免邮费</p>
                        <img src="./images/d1.jpg" alt="">
                        <p>小米路由器3</p>
                        <p>四天线设计,更安全更稳定</p>
                        <p>149元</p>
                      </div>

                      <div class="product" > 
                        <p>免邮费</p>
                        <img src="./images/d2.jpg" alt="">
                        <p>米家 LED 智能台灯</p>
                        <p>无可视频闪，亮度色温无级调节</p>
                        <p>169元</p>
                      </div>

                      <div class="product" > 
                        <p>免邮费</p>
                        <img src="./images/d3.jpg" alt="">
                        <p>小米净水器 厨下式</p>
                        <p>RO反渗透直出纯净水，包邮包安装</p>
                        <p>1999元</p>
                      </div>

                      <div class="product" > 
                        <p>免邮费</p>
                        <img src="./images/d4.jpg" alt="">
                        <p>小蚁智能摄像机 夜视版</p>
                        <p>能看能听能说，手机远程观看</p>
                        <p>149元</p>
                      </div>

                      <div class="product" > 
                        <p>免邮费</p>
                        <img src="./images/d5.jpg" alt="">
                        <p>Yeelight床头灯</p>
                        <p>触摸式操作，给卧室1600万种颜色</p>
                        <p>249元</p>
                      </div>

                      <div class="product" > 
                        <p>免邮费</p>
                        <img src="./images/d6.jpg" alt="">
                        <p>小米空气净化器2</p>
                        <p>10分钟，房间空气焕然一新</p>
                        <p>699元</p>
                      </div>

                      <div class="product" > 
                        <p>享九折</p>
                        <img src="./images/d7.jpg" alt="">
                        <p>小米智能安防套装</p>
                        <p>智能警戒，为您的家增添一份安心</p>
                        <p>169元</p>
                      </div>

                      <div class="product" > 
                        <p>免邮费</p>
                        <img src="./images/d8.jpg" alt="">
                        <p>米家iHealth血压计</p>
                        <p>爸妈上手就会用的智能血压计</p>
                        <p>399元</p>
                      </div>
                    </div>
                </div>
            </div>

            <!-- 底部 -->
              <div class="footer">
                <div class="wrapper">
                  <!-- 左侧 -->
                  <footer class="footer-menu">
                    <div class="menu-section">
                      <h3>帮助中心</h3>
                      <ul>
                        <li>账户管理</li>
                        <li>购物指南</li>
                        <li>订单操作</li>
                      </ul>
                    </div>
                    <div class="menu-section">
                      <h3>服务支持</h3>
                      <ul>
                        <li>售后政策</li>
                        <li>自助服务</li>
                        <li>相关下载</li>
                      </ul>
                    </div>
                    <div class="menu-section">
                      <h3>线下门店</h3>
                      <ul>
                        <li>小米之家</li>
                        <li>服务网点</li>
                        <li>零售网点</li>
                      </ul>
                    </div>
                    <div class="menu-section">
                      <h3>关于小米</h3>
                      <ul>
                        <li>了解小米</li>
                        <li>加入小米</li>
                        <li>联系我们</li>
                      </ul>
                    </div>
                    <div class="menu-section">
                      <h3>关注我们</h3>
                      <ul>
                        <li>新浪微博</li>
                        <li>小米部落</li>
                        <li>官方微信</li>
                      </ul>
                    </div>
                    <div class="menu-section">
                      <h3>特色服务</h3>
                      <ul>
                        <li>F码通道</li>
                        <li>小米移动</li>
                        <li>防伪查询</li>
                      </ul>
                    </div>
                    <div class="contact-info">
                      <p>400-100-5678</p>
                      <p>周一至周日 8:00-18:00</p>
                      <p>（仅收市话费）</p>
                    </div>
                  </footer>
                </div>
              </div>

              <!-- 最底部 -->
                <div class="bottom-box">
                  <div class="bottom wrapper">
                    <!-- 左侧图标 -->
                    <img src="./images/logo.png" alt=""> 
                    <!-- 右边文字 -->
                    <div class="text">
                      <p>小米网|MIUI|米聊|多看书城|小米路由器|视频电话|小米后院|小米天猫店|小米淘宝直营店|小米网盟|问题反馈|Select Region</p>
                      <p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 </p>
                      <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                      </p>
                    </div>
                  </div>

                  <!-- 底层图片 -->
                    <div class="bottom-img">
                      <img src="./images/bottom.png" alt="">
                    </div>
                </div>
  
</body>
</html>